<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>商品详情</title>
		
		<link rel="stylesheet" type="text/css" href="../../static/foreground/css/public/base.css"/>
		<link rel="stylesheet" href="../../static/foreground/css/public/iconfont_no_cart.css" />
		<link rel="stylesheet" href="../../static/foreground/css/public/iconfont_arrow.css" />
		<link rel="stylesheet" href="../../static/foreground/css/public/iconfont_search.css" />
		<link rel="stylesheet" href="../../static/foreground/css/public/iconfont_add.css" />
		<link rel="stylesheet" href="../../static/foreground/css/public/iconfont_policy.css" />
		<link rel="stylesheet" href="../../static/foreground/css/public/common.css" />
		<link rel="stylesheet" href="../../static/foreground/css/public/nav.css" />
		<link rel="stylesheet" type="text/css" href="../../static/foreground/css/goods_details/iconfont_close.css"/>
		
		<link rel="stylesheet" href="../../static/foreground/css/goods_details/goods_details.css" />
	</head>
	<body>
		<!--头部信息及导航栏-->
		<div class="header_goods"></div>
		
		<!--本页的商品导航栏-->
		<div class="page_nav">
			<div class="product_box">
				<div class="product_nav">
					<div class="product_content">
						<h2 class="product_name">红米5A 轻巧长续航</h2>
						<div class="product_rank">
							<div class="rank_right"><a href="###">用户评价</a></div>
						</div>
					</div>
				</div>
			</div>
			<!--隐藏后又显示部分-->
			<div class="product_box product_box_hide">
				<div class="product_nav">
					<div class="product_content">
						<h2 class="product_name">红米5A 轻巧长续航</h2>
						<div class="product_rank">
							<div class="rank_right"><a href="###">用户评价</a></div>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<!--购买商品内容详情开始-->
		<div class="goods_buy">
			<!--头部登录提示栏-->
			<div class="login_info">
				<!--未登录提示-->
				<div class="login_info_content">
                	为方便您购买，请提前登录 
                	<a href="../../templates/foreground/login/login.ftl">立即登录</a>
                	<a class="iconfont" id="login_info_close">&#xe607;</a>
				</div>
			</div>
			<!--商品选择开始-->
			<div class="product_choose">
				<div class="product_view span_all">
					<!--左侧轮播图-->
					<div class="imgload"></div>
					<div class="product_img_show">
						<div class="product_img_wrapper">
							<div class="img_viewport">
								<div class="slider_view_img">
									<img id="huan_tu" src="../../static/foreground/img/goods_details/goods_red_c.jpg" alt="" />
								</div>
							</div>
							<!--控制轮播图-->
							<div class="img_control">
								<!--控制页-->
								<div class="img_control_page">
									<div class="control_page_item">
										<a class="page_item_link" href="###">1</a>
									</div>
								</div>
								<!--控制方向-->
								<div class="img_control_direction">
									<a href="###" class="img_control_up control_direction">上一张</a>
									<a href="###" class="img_control_down control_direction">下一张</a>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="product_info span_all">
					<h1 class="product_title">红米5A 轻巧长续航</h1>
					<!--提示-->
					<p class="scale_desc">
						<font>「立减30元」</font>8天超长待机 / 137g轻巧机身 / 高通骁龙处理器
					</p>
					<!--选择第一级别-->
					<span class="product_price">
						569元
						<del>599元</del>
					</span>
					<!--销售赠品-->
					<div class="scale_card">
						<div class="coupon_card">
							<ul>
								<li>
									<span class="flow_tag">赠品</span>
									<span class="flow_name">赠米粉卡</span>
								</li>
							</ul>
						</div>
					</div>
					
					<!--主体商品信息-->
					<div class="product_main">
						<!--分货地址-->
						<div class="main_address">
							<div class="user_address">
								<i class="iconfont iconfont_location">&#xe699;</i>
								<div>
									<div class="address_info">
										<span class="info_item">北京</span>
										<span class="info_item">北京市</span>
										<span class="info_item">东城区</span>
										<span class="info_item">永定门外街道</span>
									</div>
									<a href="../../templates/foreground/login/personal _center.ftl" class="info_change">修改</a>
								</div>
								<div class="info_have">
									<span>有现货</span>
								</div>
							</div>
						</div>
						<!--产品版本-->
						<div class="product_wrap">
							<!--选择颜色-->
							<div class="choose_color">
								<div class="step_title">选择颜色</div>
								<ul class="step_list">
									<li class="btn_color color_active">
										<a href="###">
											<span class="name">铂银灰</span>
											<span class="price">569元</span>
										</a>
									</li>
									<li class="btn_color">
										<a href="###">
											<span class="name">樱花粉</span>
											<span class="price">569元</span>
										</a>
									</li>
									<li class="btn_color">
										<a href="###">
											<span class="name">香槟金</span>
											<span class="price">569元</span>
										</a>
									</li>
									<li class="btn_color disabled">
										<a href="###">
											<span class="name">浅蓝色</span>
											<span class="price">569元</span>
										</a>
									</li>
								</ul>
							</div>
							<!--选择容量-->
							<div class="choose_tiji">
								<div class="step_title">选择容量</div>
								<ul class="step_list">
									<li class="btn_tiji tiji_active">
										<a href="###">
											<img src="../../static/foreground/img/goods_details/goods_tiji_a.jpg"/>
											16G
										</a>
									</li>
								</ul>
							</div>
							<!--服务-->
							<div class="choose_server">
								<div class="step_title">
									 选择小米提供的保障服务 
									 <a href="//order.mi.com/product/serviceUrl?url=https%3A%2F%2Fcdn.cnbj0.fds.api.mi-img.com%2Fb2c-data-mishop%2F4a15d767c1fe.html" target="_blank">了解保障服务 &gt;</a>
								</div>
								<ul>
									<li>
										<i class="iconfont icon_check">
											<em>√</em>
										</i>
										<img src="../../static/foreground/img/goods_details/server_bao.jpg" alt="" />
										<div>
											<span class="name"> 意外保障服务  </span>
											<p class="desc">红米5A 意外保障服务</p>
											<p class="agreement">
												<i class="iconfont icon_check">
													<em>√</em>
												</i>
												我已阅读
												<a href="https://api.jr.mi.com/insurance/document/phone_accidentIns.html?insuranceSku=17557&amp;couponFrom=rule" target="_blank">保险条款<span>|</span></a>
												<a href="https://api.jr.mi.com/insurance/document/phone_accidentIns.html?insuranceSku=17557&amp;couponFrom=instruction" target="_blank">投保须知<span>|</span></a>
												<a href="https://api.jr.mi.com/insurance/document/phone_accidentIns.html?from=local&amp;insuranceSku=17557&amp;couponFrom=notification" target="_blank">客户告知<span>|</span></a>
												<a href="https://api.jr.mi.com/insurance/document/phone_accidentIns.html?insuranceSku=17557&amp;couponFrom=question" target="_blank">常见问题</a>
											</p>
											<span class="price">59元</span>
										</div>
									</li>
								</ul>
							</div>
						</div>
						
						<!--已选择产品-->
						<div class="product_list">
							<ul>
								<li>红米5A 2GB+16GB 铂银灰  <span>599元</span></li>
								<li class="totalprice">总计：599元</li>
							</ul>
						</div>
						
						<!--购买按钮-->
						<ul class="btn_buy">
							<li>
								<a class="btn_primary" href="###">加入购物车</a>
							</li>
						</ul>
						
						<!--产品政策-->
						<div class="product_policy">
							<a href="###">
								<span class="support">
									<i class="iconfont">&#xe655;</i>
									<em>7天无理由退货</em>
								</span>
								<span class="support">
									<i class="iconfont">&#xe655;</i>
									<em>15天质量问题换货</em>
								</span>
								<span class="support">
									<i class="iconfont">&#xe655;</i>
									<em>365天保修</em>
								</span>
							</a>
						</div>
						
					</div>
				</div>
			</div>
		</div>
		<!--购买商品内容详情结束-->
		
		<!--底部信息栏-->
		<div class="footer_goods"></div>
		
		<script type="text/javascript" src="../../static/foreground/js/public/jquery-3.3.1.min.js" ></script>
		<script type="text/javascript" src="../../static/foreground/js/public/goods_details.js" ></script>
	</body>
</html>
